import React from 'react'

export default class App extends React.Component {

  constructor(props) {
    super(props) // 必须要有super函数，才可以继承父类里面的属性和方法
    this.state = {
      msg: 'Hello React',
      count: 0,
      list: [1, 23, 24],
      userInfo: { id: 1, name: 'wqw' },
      isLogin: true,
    }
  }


  render() {
    // 1.jsx语法创建react元素
    // const element = (
    //   <div className='box'>
    //     <h1>{this.state.msg}</h1>
    //   </div>
    // )

    //2. 创建react元素
    const element = React.createElement(
      'h1',
      {
        className: 'box',
      },
      this.state.msg + this.state.userInfo.name
    )

    //以上2种 创建react元素的方法，最终会变成以下的对象的格式来理解元素的构成，描述一个DOM节点。
    // const element = {
    //   type: 'h1',
    //   props: {
    //     className: 'box',
    //     children: '核力量'
    //   }
    // }
    // 这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。

    return element;
  }
}